<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script
	src="${pageContext.request.contextPath}/resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>
<link
	href="${pageContext.request.contextPath}/resource/bootstrap-treeview/css/bootstrap-treeview.css"
	rel="stylesheet">
<title>分类</title>
</head>
<body>
	<div class="container">

		<div class="row">
			<div class="col-md-6" id="tree"></div>
			<div class="col-md-6">
				<!-- 添加的form -->
				<form id="addForm">
					<div class="form-group row">
						<input type="hidden" name="parentId" id="parentId" value="">
						<label for="parentName" class="col-sm-2 col-form-label">父分类名</label>
						<div class="col-sm-10">
							<input type="text" disabled="disabled" class="form-control"
								id="parentName">
						</div>
					</div>
					<div class="form-group row">
						<label for="catPath" class="col-sm-2 col-form-label">分类路径</label>
						<div class="col-sm-10">
							<input type="text"  name="path" class="form-control"
								id="catPath">
						</div>
					</div>
					<div class="form-group row">
						<label for="catName" class="col-sm-2 col-form-label">分类</label>
						<div class="col-sm-10">
							<input type="text" name="name" class="form-control" id="catName">
						</div>
					</div>
					<button type="button" class="btn btn-primary" onclick="addCat()">添加分类</button>
				</form>
				
				
				
				<hr>
				<!-- 修改和删除的form -->
				<form id="delupdateForm">

					<input type="hidden" id="currentId" name="id">
					<div class="form-group row">
						<label for="currentCatPath" class="col-sm-2 col-form-label">分类路径</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="path"
								id="currentCatPath">
						</div>
					</div>
					<div class="form-group row">
						<label for="currentCatName" class="col-sm-2 col-form-label">分类</label>
						<div class="col-sm-10">
							<input type="text" name="name" class="form-control"
								id="currentCatName">
						</div>
					</div>
					<button type="button" class="btn btn-primary" onclick="updateCat()">修改分类</button>
					<button type="button" id="delButton" class="btn btn-primary"
						onclick="delCat()">删除分类</button>
				</form>

			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

	//删除分类
	function delCat(){
		var formData = $("#delupdateForm").serialize();
		$.post("./cat/del",formData,function(resp){
			if(resp){
				alert("del成功");
				initTree();//重新加载tree
			}else{
				alert("del失败")
			}
		})
	}

	//修改分类
	function updateCat(){
		var formData = $("#delupdateForm").serialize();
		$.post("./cat/update",formData,function(resp){
			if(resp){
				alert("修改成功");
				initTree();//重新加载tree
			}else{
				alert("修改失败")
			}
		})
	}

	//添加分类
	function addCat(){
		var formData = $("#addForm").serialize();
		$.post("./cat/add",formData,function(resp){
			if(resp){
				alert("添加成功");
				initTree();//重新加载tree
			}else{
				alert("添加失败")
			}
		})
	}

	initTree();//初始化tree
	function initTree() {
		$.post("./cat/getTree", {}, function(data) {
			//树的加载
			$('#tree').treeview({
				data : data, // data is not optional
				levels : 2,
				onNodeSelected : function(event, data) {
					// 再这里不仅会触发选中节点事件,还能拿到data中的节点数据
					console.log(data.id)//{id: 1241, path: "电子产品1", text: "电子产品1", nodes: Array(1), nodeId: 7, …}
					console.log(data.path)//{id: 1241, path: "电子产品1", text: "电子产品1", nodes: Array(1), nodeId: 7, …}
					$("#parentName").val(data.text);
					$("#catPath").val(data.path);
					$("#currentCatPath").val(data.path);
					$("#currentCatName").val(data.text);
					$("#parentId").val(data.id);
					$("#currentId").val(data.id);
					
					if(data.nodes.length==0){
						//说明该节点没有子节点
						$("#delButton").attr("disabled",false);
					}else{
						//说明有子节点
						$("#delButton").attr("disabled",true);
					}
				}
			});

		})

	}
</script>
</html>